<template>
  <div>
    <div style="width: 100%; height: 50px" v-if="arr.length > 0"></div>
    <div
      class="ele-bottom-tool"
      style="padding-right: 40px"
      v-if="arr.length > 0"
    >
      <div class="ele-bottom-tool-actions">
        <a-space size="large">
          <div v-for="item in arr" :key="item.url">
            <a-button type="primary" @click="action(item)">
              {{ item.name }}
            </a-button>
          </div>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted, watch } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps({
    btnarr: Array,
    receiptsDetail: Object
  });

  const emit = defineEmits(['bottomAction']);

  const arr = ref([]);

  watch(
    () => [props.receiptsDetail],
    (newValue) => {
      let rules = [
        {
          status: 0,
          typeArr: ['reject', 'agree']
        }
      ];
      arr.value = [];
      props.btnarr.forEach((item) => {
        if (hasPermission(item.url) && item.type != 'detail') {
          rules.forEach((m) => {
            if (
              props.receiptsDetail.receive_status == m.status &&
              m.typeArr.indexOf(item.type) >= 0
            ) {
              arr.value.push(item);
            }
          });
        }
      });
    }
  );
  const action = (item) => {
    emit('bottomAction', item);
  };

  /* 判断是否有某个权限*/
  const hasPermission = (value) => {
    const userStore = useUserStore();
    return arrayHas(userStore?.authorities, value);
  };
  /* 判断数组是否有某些值 */
  const arrayHas = (array, value) => {
    if (!value) {
      return true;
    }
    if (!array) {
      return false;
    }
    if (Array.isArray(value)) {
      for (let i = 0; i < value.length; i++) {
        if (array.indexOf(value[i]) === -1) {
          return false;
        }
      }
      return true;
    }
    return array.indexOf(value) !== -1;
  };
</script>

<style></style>
